
<template>
  <div
    class="bg-[url('assets/imgs/bg.jpg')] bg-cover bg-center h-screen text-white p-5 flex overflow-hidden"
  >
    <!-- 左 -->
    <div class="flex-1 mr-5 bg-opacity-50 bg-slate-800 p-3 flex flex-col" v-if="data">
      <!-- 横向柱状图 -->
      <HorizontalBar class="h-1/3 box-boarder pb-4" v-if="data.regionData" :data="data.regionData" />
      <!-- 雷达图 -->
      <RadarBar class="h-1/3 box-boarder pb-4" v-if="data.riskData" :data="data.riskData" />
      <!-- 关系图 -->
      <Relation class="h-1/3" v-if="data.relationData" :data="data.relationData" />
    </div>
    <!-- 中 -->
    <div class="w-1/2 mr-5 flex flex-col">
      <!-- 数据总览图 -->
      <TotalData class="bg-opacity-50 bg-slate-800 p-3" v-if="data.totalData"  :data="data.totalData" />
      <!-- 地图可视化 -->
      <MapChart class="bg-opacity-50 bg-slate-800 p-3 mt-4 flex-1" v-if="data.mapData" :data="data.mapData" />
    </div>
    <!-- 右 -->
    <div class="flex-1 bg-opacity-50 bg-slate-800 p-3 flex flex-col">
      <!-- 竖向柱状图 -->
      <VerticalBar class="h-1/3 box-boarder pb-4" v-if="data.serverData" :data="data.serverData" />
      <!-- 环形图 -->
      <RingBar class="h-1/3 box-boarder pb-4"  v-if="data.abnormalData" :data="data.abnormalData" />
      <!-- 文档云图 -->
      <WordCloud class="h-1/3" v-if="data.wordCloudData" :data="data.wordCloudData" />
    </div>
  </div>
</template>
<script setup>
import HorizontalBar from "./components/HorizontalBar.vue";
import RadarBar from "./components/RadarBar.vue";
import Relation from "./components/Relation.vue";
import TotalData from "./components/TotalData.vue";
import MapChart from "./components/MapChart.vue";
import VerticalBar from "./components/VerticalBar.vue";
import RingBar from "./components/RingBar.vue";
import WordCloud from "./components/WordCloud.vue";

import { ref, onServerPrefetch,onMounted } from "vue";
import { getVisualization } from "./api/visualization.js";

const data = ref(null);

const loadData = async () => {
  data.value = await getVisualization();
  console.log(data.value);
};


onServerPrefetch(async () => {
  // 组件作为初始请求的一部分被渲染
  // 在服务器上预抓取数据，因为它比在客户端上更快。
  data.value = await getVisualization();
})

onMounted(async () => {
  if (!data.value) {
    // 如果数据在挂载时为空值，这意味着该组件
    // 是在客户端动态渲染的。将转而执行
    // 另一个客户端侧的抓取请求
    data.value = await getVisualization();
  }
})
loadData();
setInterval(() => {
  loadData();
}, 3000);
</script>

<style scoped lang="scss">
</style>
